document.addEventListener('DOMContentLoaded', function() {
    const loginButton = document.getElementById('login-button');
    const loginPopup = document.getElementById('login-popup');
    const closeLogin = document.getElementById('close-login');
    const loginForm = document.getElementById('login-form');

    // 点击登录按钮显示弹窗
    loginButton.addEventListener('click', function() {
        loginPopup.classList.remove('hidden');
    });

    // 点击关闭按钮或弹窗外部区域隐藏弹窗
    closeLogin.addEventListener('click', function() {
        loginPopup.classList.add('hidden');
    });

    loginPopup.addEventListener('click', function(event) {
        // 检查点击事件的目标是否是弹窗本身（而不是其内部元素）
        if (event.target === loginPopup) {
            loginPopup.classList.add('hidden');
        }
    });

    // 阻止弹窗内部元素的点击事件冒泡到弹窗本身
    loginPopup.addEventListener('click', function(event) {
        event.stopPropagation(); // 这行实际上不是必需的，因为我们已经检查了事件目标
    }, true); 

    // 表单提交处理
    loginForm.addEventListener('submit', function(event) {
        event.preventDefault();
        const username = document.getElementById('username').value;
        const password = document.getElementById('password').value;

        // 在这里进行验证（这里只是示例，实际应用中应为后端验证）
        if (username === 'admin' && password === 'password123') {
            // 登录成功，跳转到欢迎页面并传递用户名
            window.location.href = `welcome.html?username=${encodeURIComponent(username)}`;
        } else {
            alert('用户名或密码错误！');
        }
    });

    // 没有在页面加载时显示弹窗的代码
});